<template>
  <div class="container-fluid">
    <div>{{dataBaseUrl}}{{indice}}{{type}}</div>
    <div class="row">
      <div class="col-md-12">
        <div class="well">
          <div class="input-group">
            <span class="input-group-addon" id="basic-addon3">https://{{dataBaseUrl}}</span>
            <span class="input-group-addon" id="basic-addon3">
              <select v-model="selectIndice">
                <option value="_all">全部</option>
                <option v-for="(indice,key) in getProperty(this.state, 'metadata', 'indices')" :key="key" :value="key">{{key}}</option>
              </select>
            </span>
            <span class="input-group-addon" id="basic-addon3">
              <select v-model="selectType">
                <option value="_all">全部</option>
                <option v-for="(indice,key) in getProperty(this.state, 'metadata', 'indices', this.indice, 'mappings')" :key="key" :value="key">{{key}}</option>
              </select>
            </span>
            <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">搜索</button>
            </span>
          </div>
        </div>
      </div>
    </div>
    {{properties}}
  </div>
</template>

<script>
import {bus} from '@/bus.js'

export default {
  name: 'simpleSearch',
  data () {
    return {
      selectIndice: '',
      selectType: '',
      state: {},
      search: {}
    }
  },
  computed: {
    dataBaseUrl () {
      return this.$route.params.url
    },
    indice () {
      return this.$route.params.indice
    },
    type () {
      return this.$route.params.type
    },
    properties () {
      var properties = []
      var indices = this.getProperty(this.state, 'metadata', 'indices')

      if (this.indice === '_all') {
        for (const indiceName in indices) {
          var indice = indices[indiceName]

          for (const typeName in indice.mappings) {
            var type = indice.mappings[typeName]

            for (const typeName in type.properties) {
              // var property = type.properties[typeName]
              properties.push(typeName)
            }
          }
        }
      } else {
        indice = indices[this.indice]

        for (const typeName in indice.mappings) {
          type = indice.mappings[typeName]

          for (const typeName in type.properties) {
            // var property = type.properties[typeName]
            properties.push(typeName)
          }
        }
      }

      return properties
    }
  },
  watch: {
    selectIndice () {
      this.$router.push({
        name: 'simpleSearchIndex',
        params: {
          url: this.dataBaseUrl,
          indice: this.selectIndice,
          type: '_all'
        }
      })
      this.updateIndiceState()
      this.selectType = '_all'
    },
    selectType () {
      this.$router.push({
        name: 'simpleSearchIndex',
        params: {
          url: this.dataBaseUrl,
          indice: this.selectIndice,
          type: this.selectType
        }
      })
    }
  },
  methods: {
    getPropertyCount (obj) {
      var count = 0
      // eslint-disable-next-line
      for (var key in obj) {
        count++
      }

      return count
    },
    getProperty () {
      var obj = arguments[0]
      for (let index = 1; index < arguments.length; index++) {
        if (obj !== null && obj !== undefined) {
          obj = obj[arguments[index]]
        } else {
          break
        }
      }
      return obj
    },
    updateIndiceState () {
      this.state = {}

      bus.execute({
        method: 'GET',
        url: 'http://' + this.dataBaseUrl + '/_cluster/state',
        data: null
      }).then((res) => {
        this.state = res.data
      })
    }
  },
  mounted () {
    this.updateIndiceState()
    this.selectIndice = this.indice
    this.selectType = this.type
  }
}
</script>
